<template>
  <div class="add_mainBody">
    <div class="pull_left add_top">
      <span>模板CODE:</span
      ><el-input placeholder="请输入模板CODE" v-model="templateCode"></el-input>
    </div>
    <div class="pull_left add_top">
      <span>模板标题:</span
      ><el-input placeholder="请输入模板标题" v-model="templateName"></el-input>
    </div>
    <div class="pull_left add_top" v-if="issee">
      <span>模板内容:</span
      ><el-input
        placeholder="请输入模板内容"
        v-model="templateContent"
      ></el-input>
    </div>
    <div class="pull_left add_top" v-if="issee">
      <span>模板类型:</span>
      <el-select v-model="templateType" placeholder="">
        <el-option label="短信" value="1"> </el-option>
        <el-option label="邮件" value="2"> </el-option>
      </el-select>
      <!-- <el-input placeholder="请输入模板类型" v-model="templateType"></el-input> -->
    </div>

    <div class="add_top pull_left add_margin">
      <el-button type="primary" icon="el-icon-search" @click="dictlistSearch()"
        >查询</el-button
      >
      <el-button type="primary" icon="el-icon-refresh-right" @click="reset()"
        >重置</el-button
      >
      <span class="close" @click="ishow()" v-if="!issee">展开∨</span>
      <span class="close" v-if="issee" @click="ishow()">收起∧</span>
    </div>
    <div class="clear"></div>
    <div class="add_margin add_top pull_left">
      <el-button type=" primary" icon="el-icon-plus" @click="templateAdd()"
        >新增</el-button
      >
      <el-button type="primary" icon="el-icon-download" @click="exportForm()"
        >导出</el-button
      >
      <el-button type="primary" icon="el-icon-upload2">导入</el-button>
    </div>
    <div class="clear"></div>
    <div class="add_margin add_background add_top">
      <span>已选择0项</span> <span class="close">清空</span>
    </div>
    <div class="add_margin">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="#"> </el-table-column>
        <el-table-column
          v-for="(item, index) in headData"
          :index="item.index"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>
        <!-- <template v-slot:operationBtn="{ operationData }"> -->
        <div class="operate">
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center" 
          >
            <template slot-scope="scope">
              <el-button 
                @click="templateEdit(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-dropdown>
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @onConfirm="confirmDelete(scope.row)"
                    >
                      <el-button slot="reference" style="border: none"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item style="text-align: center"
                    >发送测试</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </div>
      </el-table>
      <!-- 分页 -->
      <div class="pull_right paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 新增弹框 -->
    <div class="addDialog">
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="45%"
      >
        <el-form
          :model="ruleFormAdd"
          :rules="rulesAdd"
          ref="ruleFormAdd"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="模板CODE" prop="templateCODE">
                <el-input v-model="ruleFormAdd.templateCODE"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="模板类型" prop="templatetype">
                <el-select
                  v-model="ruleFormAdd.templatetype"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in templateOptions"
                    :key="item.type"
                    :label="item.name"
                    :value="item.type"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="addTitle">
            <el-form-item label="模板标题" prop="templatetitle">
              <el-input v-model="ruleFormAdd.templatetitle"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="模板内容">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="ruleFormAdd.templateContent"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFormAdd('ruleFormAdd')"
          >确 定</el-button
        >
      </el-dialog>
    </div>

    <!-- 编辑弹框 -->
    <div class="edit">
      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible1"
        width="45%"
        :append-to-body="true"
      >
        <el-divider></el-divider>
        <el-form
          :model="ruleFormEdit"
          :rules="rulesEdit"
          ref="ruleFormEdit"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="模板CODE" prop="templateCODE">
                <el-input
                  id="ruleFormEdit.templateCODE"
                  v-model="ruleFormEdit.templateCODE"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="eidt-type">
                <el-form-item label="模板类型" prop="templatetype">
                  <el-select
                    v-model="ruleFormEdit.templatetype"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in templateOptions"
                      :key="item.type"
                      :label="item.name"
                      :value="item.type"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-form-item label="模板标题" prop="templatetitle">
            <el-input v-model="ruleFormEdit.templatetitle"></el-input>
          </el-form-item>
          <el-form-item label="模板内容">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="ruleFormEdit.templateContent"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submitFormEdit('ruleFormEdit')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.add_mainBody {
  background-color: white;
  padding: 24px;
}
.pull_left {
  float: left;
}
.pull_right {
  float: right;
}
.clear {
  clear: both;
}
.add_top {
  padding-left: 35px;
  padding-right: 25px;
}
.add_top span {
  padding-right: 8px;
}
.add_top .close {
  margin-left: 15px;
  color: blue;
  cursor: pointer;
}
.add_margin {
  margin-top: 10px;
}
.add_background {
  background-color: #e6f7ff;
  line-height: 60px;
}
.add_background span {
  margin-left: 30px;
}
.paging {
  margin-right: 100px;
  margin-top: 20px;
}
.paging .el-pager li {
  margin-left: 10px;
  margin-right: 5px;
}
.el-dropdown-link {
  color: #40a9ff;
}
.el-table-column {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit .el-dialog__body {
  padding: 0px 2px;
  color: #606266;
  font-size: 11px;
  word-break: break-all;
}

.addDialog .el-textarea__inner {
  height: 400px;
}

.addDialog .el-input__suffix {
  right: 150px;
}
.cell .el-button--text {
  font-size: 14px;
  padding-right: 5px;
}
</style>
<script>
import {
  messagesysMessageTemplate,
  exportTemplate,
  messagesysMessageTemplateadd,
  duplicatecheck,
  edit,
  deleteTemplate,
} from "@/api/messagetempalte";
export default {
  data() {
    var validatetemplateCODE = (rule, value, callback) => {
      let _self = this;
      let data = {
        name: _self.ruleFormAdd.templateCODE,
      };
      duplicatecheck(data).then((res) => {
        console.log(res);
        if (res.code == 500) {
          return callback(new Error(res.message));
        } else {
          return callback();
        }
      });
    };
    return {
      dialogVisible: false,
      dialogVisible1: false,
      textarea: "",
      headData: [
        {
          prop: "templateCODE",
          label: "模板CODE",
          width: "250",
        },
        {
          prop: "templatetitle",
          label: "模板标题",
          width: "250",
        },
        {
          prop: "templateContent",
          label: "模板内容",
          width: "350",
        },
        {
          prop: "templateType",
          label: "模板类型",
        },
      ],
      ruleFormAdd: {
        templateCODE: "",
        templatetype: "1",
        templatetitle: "",
        templateContent: "",
      },
      templateOptions: [
        {
          name: "短信",
          type: "1",
        },
        {
          name: "邮件",
          type: "2",
        },
      ],
      ruleFormEdit: {
        templateCODE: "",
        templatetype: "1",
        templatetitle: "",
        templateContent: "",
      },
      tableData: [],
      multipleSelection: [],
      rulesAdd: {
        templateCODE: [
          { required: true, message: "请输入模板CODE", trigger: "blur" },
          { validator: validatetemplateCODE, trigger: "blur" },
        ],
        templatetype: [
          { required: true, message: "请输入模板类型", trigger: "blur" },
        ],
        templatetitle: [
          { required: true, message: "请输入模板标题", trigger: "blur" },
        ],
      },
      rulesEdit: {
        templateCODE: [
          { required: true, message: "请输入模板CODE", trigger: "blur" },
        ],
        templatetype: [
          { required: true, message: "请输入模板类型", trigger: "blur" },
        ],
        templatetitle: [
          { required: true, message: "请输入模板标题", trigger: "blur" },
        ],
      },
      currentPage4: 1,
      issee: false,
      pageNo: 1,
      total: 0,
      pageSize: 10,
      templateCode: "",
      templateName: "",
      templateContent: "",
      templateType: "",
      //
      createBy: "admin",
      createTime: "",
      id: "",
      updateBy: "admin",
      updateTime: "",
    };
  },

  mounted() {
    let _self = this;
    _self.dictlistSearch();
  },

  methods: {
    submitFormAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _self = this;
          let data = {
            templateType: _self.ruleFormAdd.templatetype,
            templateCode: _self.ruleFormAdd.templateCODE,
            templateName: _self.ruleFormAdd.templatetitle,
            templateContent: _self.ruleFormAdd.templateContent,
          };
          messagesysMessageTemplateadd(data).then((res) => {
            console.log(res);
            if (res.code == 200) {
              _self.dialogVisible = false;
              _self.$refs[formName].resetFields();
              _self.ruleFormAdd.templateContent = "";
              _self.tableData = [];
              _self.dictlistSearch();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitFormEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _self = this;
          console.log(_self.id);
          let data = {
            templateType: _self.ruleFormEdit.templatetype,
            templateCode: _self.ruleFormEdit.templateCODE,
            templateName: _self.ruleFormEdit.templatetitle,
            templateContent: _self.ruleFormEdit.templateContent,
            createBy: _self.createBy,
            createTime: _self.createTime,
            id: _self.id,
            updateBy: _self.updateBy,
            updateTime: _self.updateTime,
          };
          edit(data).then((res) => {
            console.log(res);
            if (res.code == 200) {
              _self.dialogVisible1 = false;
              _self.dictlistSearch();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      let _self = this;
      _self.dialogVisible1 = false;
    },
    templateAdd() {
      let _self = this;
      _self.dialogVisible = true;
    },
    templateEdit(row) {
      let _self = this;
      _self.dialogVisible1 = true;
      _self.id = row.id;
      // _self.ruleFormEdit = JSON.parse(JSON.stringify(row));
      _self.ruleFormEdit.templateCODE = row.templateCODE;

      _self.ruleFormEdit.templatetitle = row.templatetitle;
      _self.ruleFormEdit.templateContent = row.templateContent;

      _self.ruleFormEdit.templatetype = "1";
      console.log(_self.ruleFormEdit);
    },
    reset() {
      let _self = this;
      _self.tableData = [];
      _self.templateCode = "";
      _self.templateName = "";
      _self.templateContent = "";
      _self.templateType = "";
      _self.pageNo = 1;
      _self.pageSize = 10;
      _self.dictlistSearch();
    },
    dictlistSearch() {
      let _self = this;
      _self.tableData = [];
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
        templateCode: _self.templateCode,
        templateName: _self.templateName,
        templateContent: _self.templateContent,
        templateType: _self.templateType,
      };
      messagesysMessageTemplate(data).then((res) => {
        console.log(res.result.records);
        for (let index in res.result.records) {
          _self.tableData.push({
            id: res.result.records[index].id,
            serialNumber: index + 1,
            templateCODE: res.result.records[index].templateCode,
            templatetitle: res.result.records[index].templateName,
            templateContent: res.result.records[index].templateContent,
            templateType:
              res.result.records[index].templateType == 1 ? "短信" : "邮件",
          });
        }

        _self.total = res.result.total;
      });
    },
    //删除
    confirmDelete(row) {
      console.log(row);
      let _self = this;
      let data = {
        id: row.id,
      };
      deleteTemplate(data).then((res) => {
        console.log(res);
        _self.dictlistSearch();
      });
    },
    exportForm() {
      let _self = this;
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
      };
      exportTemplate(data).then((res) => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "导出文件.xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "导出文件.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    ishow() {
      let _self = this;
      _self.issee = !_self.issee;
    },
    //分页
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pageSize = val;
      _self.dictlistSearch();
    },
    handleCurrentChange(val) {
      let _self = this;
      console.log(`当前页: ${val}`);
      _self.pageNo = val;
      _self.dictlistSearch();
    },
  },
};
</script>